// import echarts from "echarts";
import echarts from "../../../components/BaseEcharts/utils/echarts";
import _ from "lodash";

function optionBar() {
  const resData = [
    {
      设备名称: "三峡22F水轮发电机组",
      设备类型: "水轮发电机组设备(机械部分)",
      设备类型权重: 100.0,
      设备类型得分: 100.0,
      设备名称id: "02011M",
      fb_name: "22FB",
    },
    {
      设备名称: "三峡1F水轮发电机组",
      设备类型: "水轮发电机组设备(机械部分)",
      设备类型权重: 100.0,
      设备类型得分: 100.0,
      设备名称id: "02011M",
      fb_name: "1FB",
    },
    {
      设备名称: "三峡1F水轮发电机组",
      设备类型: "水轮发电机组设备(机械部分)",
      设备类型权重: 80.0,
      设备类型得分: 20.0,
      设备名称id: "02011M",
      fb_name: "1FB",
    },
    {
      设备名称: "三峡2F水轮发电机组",
      设备类型: "水轮发电机组设备(机械部分)",
      设备类型权重: 100.0,
      设备类型得分: 100.0,
      设备名称id: "02011M",
      fb_name: "2FB",
    },
    {
      设备名称: "三峡2F水轮发电机组",
      设备类型: "水轮发电机组设备(机械部分)",
      设备类型权重: 80.0,
      设备类型得分: 20.0,
      设备名称id: "02011M",
      fb_name: "2FB",
    },
    {
      设备名称: "三峡2F水轮发电机组",
      设备类型: "水轮发电机组设备(机械部分)",
      设备类型权重: 80.0,
      设备类型得分: 20.0,
      设备名称id: "02011M",
      fb_name: "2FB",
    },

    {
      设备名称: "三峡1F水轮发电机组",
      设备类型: "水轮发电机组设备",
      设备类型权重: 100.0,
      设备类型得分: 100.0,
      设备名称id: "02011M",
      fb_name: "1FB",
    },
    {
      设备名称: "三峡1F水轮发电机组",
      设备类型: "水轮发电机组设备",
      设备类型权重: 80.0,
      设备类型得分: 20.0,
      设备名称id: "02011M",
      fb_name: "1FB",
    },
    {
      设备名称: "三峡2F水轮发电机组",
      设备类型: "水轮发电机组设备",
      设备类型权重: 100.0,
      设备类型得分: 100.0,
      设备名称id: "02011M",
      fb_name: "2FB",
    },
    {
      设备名称: "三峡2F水轮发电机组",
      设备类型: "水轮发电机组设备",
      设备类型权重: 80.0,
      设备类型得分: 20.0,
      设备名称id: "02011M",
      fb_name: "2FB",
    },
    {
      设备名称: "三峡2F水轮发电机组",
      设备类型: "水轮发电机组设备",
      设备类型权重: 80.0,
      设备类型得分: 20.0,
      设备名称id: "02011M",
      fb_name: "2FB",
    },
  ];

  // console.log("resData", resData);
  const resultData = disposeResData(resData);

  const firstTypeSeries = []; // 1F 2F 的排列
  const secondTypeSeries = []; // 水轮发电机 主变压器 的排列

  // 计算占位百分比
  const firstAllCount = resultData.firstTypeWidth.reduce(
    (sum, item) => (sum += item),
    0
  );
  // console.log("firstAllCount", firstAllCount);
  resultData.firstX.forEach((item, index) => {
    firstTypeSeries.push({
      data: [
        {
          name: item,
          value: 1,
        },
      ],
      label: {
        show: true,
        position: "inside",
        formatter: "{b}",
        offset: [0, 10],
        textStyle: {
          color: "#777",
          fontSize: 16,
        },
      },
      type: "bar",
      barGap: 0,
      barWidth: `${(
        (resultData.firstTypeWidth[index] / firstAllCount) *
        100
      ).toFixed(2)}%`,
      itemStyle: {
        normal: {
          // color: 'rgba(255, 71, 119, .5)',
          color: "#fff",
        },
      },
      xAxisIndex: 1,
      yAxisIndex: 1,
    });
  });

  // console.log("firstTypeSeries", firstTypeSeries);
  const secondAllCount = resultData.secondTypeWidth.reduce(
    (sum, item) => (sum += item),
    0
  );
  resultData.secondX.forEach((item, index) => {
    secondTypeSeries.push({
      data: [
        {
          name: item,
          value: 1,
        },
      ],
      label: {
        show: true,
        position: "inside",
        formatter: "{b}",
        offset: [0, 40],
        textStyle: {
          color: "#777",
          fontSize: 16,
        },
      },
      type: "bar",
      barGap: 0,
      barWidth: `${(
        (resultData.secondTypeWidth[index] / secondAllCount) *
        100
      ).toFixed(2)}%`,
      itemStyle: {
        normal: {
          // color: 'rgba(246, 146, 28, .8)',
          color: "#fff",
        },
      },

      xAxisIndex: 2,
      yAxisIndex: 1,
    });
  });

  const option = {
    toolbox: {
      show: true,
      feature: {
        dataView: { show: true },
        saveAsImage: {
          //excludeComponents :['toolbox'],
          pixelRatio: 5,
        },
      },
    },
    grid: [
      {
        top: 70,
        bottom: 101,
        left: 50,
        right: 30,
      },
      {
        height: 60,
        bottom: 40,
        left: 56,
        right: 35,
      },
    ],
    xAxis: [
      {
        type: "category",
        data: resultData.xData,
        gridIndex: 0,
        // 标签颜色
        axisLabel: {
          color: "#000",
          textStyle: {
            fontSize: 13, //更改坐标轴文字大小
          },
        },
        // 轴线颜色
        axisLine: {
          lineStyle: {
            color: "#e7e7e7",
          },
        },
        zlevel: 2,
      },

      // 辅助柱形图x轴设置
      {
        type: "category",
        gridIndex: 1,
        // 不显示x轴
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },

        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        zlevel: 1,
      },
      {
        type: "category",
        gridIndex: 1,
        // 不显示x轴
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },

        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        zlevel: 0,
      },
    ],
    yAxis: [
      {
        type: "value",
        gridIndex: 0,
        axisLabel: {
          color: "#333",
        },
        splitLine: {
          lineStyle: {
            type: "dashed",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#ccc",
          },
        },
        axisTick: {
          lineStyle: {
            color: "#ccc",
          },
        },
      },
      {
        type: "value",
        gridIndex: 1,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      // 上顶盖
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [40, 10],
        symbolOffset: [0, -6],
        symbolPosition: "end",
        z: 12,
        // "barWidth": "0",
        label: {
          normal: {
            show: false,
          },
        },
        color: "#2DB1EF",
        data: resultData.yData,
      },
      // 下顶盖
      {
        name: "",
        type: "pictorialBar",
        symbolSize: [40, 10],
        symbolOffset: [0, 7],
        // "barWidth": "20",
        z: 12,
        color: "rgba(125, 177, 239, 1)",
        data: resultData.yData,
      },
      // 圆柱
      {
        type: "bar",
        //silent: true,
        barWidth: "40",
        barGap: "10%", // Make series be overlap
        barCateGoryGap: "10%",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
              {
                offset: 0,
                color: "rgba(30, 110, 207, 1)",
              },
              {
                offset: 1,
                color: "rgba(30, 110, 207, .6)",
              },
            ]),
          },
        },
        data: resultData.yData,
        label: {
          show: true,
          position: "top",
          fontSize: "12px",
          color: "rgba(30, 110, 207, 1)",
          formatter: (params) => {
            // console.log("kks params", params);
            if (params.value == 0) {
              return "";
            } else {
              return params.value;
            }
          },
        },
      },

      ...firstTypeSeries,
      ...secondTypeSeries,
    ],
  };

  return option;
}

function disposeResData(resData) {
  const returnObj = {
    xData: [],
    yData: [],
    firstX: [], // 1F,2F
    firstTypeWidth: [],
    secondX: [], // 水轮发电机组设备
    secondTypeWidth: [],
  };
  //设备类型 - 机组号 二重排序
  const groupTree = _.groupBy(resData, "设备类型");
  for (let key in groupTree) {
    groupTree[key] = _.groupBy(groupTree[key], "fb_name");
  }
  // console.log("groupTree", groupTree);

  // 处理多重不定宽分组的 计算依赖数据
  for (let type in groupTree) {
    let typeNumber = 0;
    for (let name in groupTree[type]) {
      const list = groupTree[type][name];

      list.forEach((item) => {
        returnObj.xData.push("");
        returnObj.yData.push(item["设备类型得分"]);
      });
      returnObj.xData.push("");
      returnObj.yData.push(null);

      typeNumber += list.length + 1;
      returnObj.firstX.push(name);
      returnObj.firstTypeWidth.push(list.length);

      returnObj.firstX.push("");
      returnObj.firstTypeWidth.push(1);
    }
    returnObj.secondX.push(type);
    // 该组 所占多少最小单元
    returnObj.secondTypeWidth.push(typeNumber);
  }

  // 删除最后一个
  returnObj.xData.pop();
  returnObj.yData.pop();
  returnObj.firstTypeWidth.pop();
  returnObj.firstX.pop();
  returnObj.secondTypeWidth[returnObj.secondTypeWidth.length - 1] =
    returnObj.secondTypeWidth[returnObj.secondTypeWidth.length - 1] - 1;

  // console.log("returnObj", returnObj);
  return returnObj;
}

export default optionBar;
